<template>
  <el-dialog v-model="visible" width="480px" :show-close="false" class="bilibili-login-dialog"
    :close-on-click-modal="false" :close-on-press-escape="false">
    <template #header>
      <div class="dialog-header">
        <h3>登录</h3>
        <el-icon class="close-btn" @click="visible = false">
          <Close />
        </el-icon>
      </div>
    </template>

    <div class="login-content">

      <img v-if="activeLoginTab === 'password'" :src="leftBottomImage" class="corner-image left-bottom" alt="左下角图片">

      <img v-if="activeLoginTab === 'password'" :src="rightBottomImage" class="corner-image right-bottom" alt="右下角图片">

      <el-tabs v-model="activeLoginTab" stretch @tab-change="handleTabChange">
        <el-tab-pane label="扫码登录" name="qrcode">
          <div class="qrcode-section">
            <div class="qrcode-container">
              <img
                src=""
                alt="扫码登录">
            </div>
            <p class="qrcode-tip">请使用<b>哔哩哔哩客户端</b>扫码登录或扫码下载APP</p>
          </div>
        </el-tab-pane>

        <el-tab-pane label="密码登录" name="password">
          <el-form :model="loginForm" class="password-form">
            <el-form-item>
              <el-input v-model="loginForm.username" placeholder="请输入账号" size="large" @focus="handleUsernameFocus"
                @blur="handleUsernameBlur" />
            </el-form-item>
            <el-form-item>
              <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" size="large" show-password
                @focus="handlePasswordFocus" @blur="handlePasswordBlur" />
            </el-form-item>
            <div class="form-actions">
              <span class="forget-pwd">忘记密码？</span>
            </div>
            <el-button
              type="primary"
              class="login-btn"
              size="large"
              style="width: 100%;"
              :loading="isLoggingIn"
              @click="handleLogin"
            >
              <template #loading>
                <div class="loading-content">
                  <el-avatar v-if="showAvatar" :size="24" :src="avatarUrl" />
                  <span v-else>登录中...</span>
                </div>
              </template>
              <span v-if="!isLoggingIn">登录</span>
            </el-button>
          </el-form>

          <div class="register-section">
            <span>注册</span>
            <span class="divider">|</span>
            <span>短信登录</span>
          </div>
        </el-tab-pane>
      </el-tabs>

      <div class="other-login">
        <div class="divider-line">
          <span class="divider-text">其他方式登录</span>
        </div>
        <div class="social-login">
          <el-button circle class="social-btn">
            <i class="iconfont icon-weixin icon-weixin"></i>
          </el-button>
          <el-button circle class="social-btn">
            <i class="iconfont icon-shejiaotubiao-42"></i>
          </el-button>
          <el-button circle class="social-btn">
            <i class="iconfont icon-shejiaotubiao-39"></i>
          </el-button>
        </div>
      </div>

      <div class="agreement">
        未注册过哔哩哔哩的手机号，我们将自动帮你注册账号<br>
        登录或完成注册即代表你同意<b>用户协议</b>和<b>隐私政策</b>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { Close } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()
// 图片导入
import img1_close from '@/assets/imgs/login/img1_close.png'
import img1_open from '@/assets/imgs/login/img1_open.png'
import img2_close from '@/assets/imgs/login/img2_close.png'
import img2_open from '@/assets/imgs/login/img2_open.png'
import defaultAvatar from '@/assets/imgs/login/avator.png' // 准备一个默认头像

const visible = ref(false)
const activeLoginTab = ref('qrcode')
const isLoggingIn = ref(false)
const showAvatar = ref(false)
const avatarUrl = ref(defaultAvatar)

const loginForm = ref({
  username: '',
  password: ''
})

// 根据当前激活的标签页设置不同的图片
const leftBottomImage = ref(img1_open)
const rightBottomImage = ref(img2_open)
const isUsernameFocused = ref(false)
const isPasswordFocused = ref(false)

const handleTabChange = (tabName) => {
  if (tabName === 'qrcode') {
    // 扫码登录时不显示图片
    leftBottomImage.value = ''
    rightBottomImage.value = ''
  } else {
    // 密码登录时默认显示_open图片
    leftBottomImage.value = img1_open
    rightBottomImage.value = img2_open
  }
}

const handleUsernameFocus = () => {
  isUsernameFocused.value = true
  updateImages()
}

const handleUsernameBlur = () => {
  isUsernameFocused.value = false
  updateImages()
}

const handlePasswordFocus = () => {
  isPasswordFocused.value = true
  updateImages()
}

const handlePasswordBlur = () => {
  isPasswordFocused.value = false
  updateImages()
}

const updateImages = () => {
  if (activeLoginTab.value === 'password') {
    if (isPasswordFocused.value) {
      // 密码框获取焦点时显示_close图片
      leftBottomImage.value = img1_close
      rightBottomImage.value = img2_close
    } else {
      // 其他情况显示_open图片
      leftBottomImage.value = img1_open
      rightBottomImage.value = img2_open
    }
  }
}

const handleLogin = async () => {
  if (!loginForm.value.username || !loginForm.value.password) {
    ElMessage.warning('请输入账号和密码')
    return
  }

  isLoggingIn.value = true

  try {
    // 模拟登录请求
    await new Promise(resolve => setTimeout(resolve, 1000))

    if (loginForm.value.username === 'admin' && loginForm.value.password === 'admin') {
      const avatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'

      // 调用Pinia store的login方法
      authStore.login(loginForm.value.username, avatar)

      // 显示加载动画
      showAvatar.value = true
      avatarUrl.value = avatar

      // 保持显示1秒后关闭弹窗
      setTimeout(() => {
        visible.value = false
        ElMessage.success('登录成功')
        isLoggingIn.value = false
        showAvatar.value = false
        loginForm.value = { username: '', password: '' }
      }, 1000)
    } else {
      ElMessage.error('账号或密码错误')
    }
  } catch (error) {
     ElMessage.error(`登录失败: ${error.message}`)
  } finally {
    isLoggingIn.value = false
  }
}

const open = () => {
  visible.value = true
}

defineExpose({
  open
})
</script>

<style scoped lang="scss">
.bilibili-login-dialog {
  :deep(.el-dialog) {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
    font-family: 'PingFang SC', 'HarmonyOS_Regular', 'Helvetica Neue', Arial, sans-serif;
    position: relative;
    min-height: 500px;
  }

  :deep(.el-dialog__header) {
    padding: 0;
    margin: 0;
  }

  :deep(.el-dialog__body) {
    padding: 0 24px 24px;
    position: relative;
  }

  .corner-image {
    position: absolute;
    width: 80px;
    height: 80px;
    object-fit: contain;
    z-index: 1;
  }

  .left-bottom {
    left: -18px;
    bottom: -18px;
  }

  .right-bottom {
    right: -18px;
    bottom: -19px;
  }

  .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #f0f0f0;

    h3 {
      margin: 0 auto;
      font-size: 18px;
      font-weight: 500;
      color: #222;
    }

    .close-btn {
      cursor: pointer;
      color: #999;
      font-size: 20px;

      &:hover {
        color: #666;
      }
    }
  }

  .login-content {
    position: relative;
    min-height: 400px;
  }

  .qrcode-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;

    .qrcode-container {
      width: 160px;
      height: 160px;
      margin-bottom: 16px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .qrcode-tip {
      margin: 0;
      font-size: 12px;
      color: #999;
      text-align: center;

      b {
        color: #fb7299;
        font-weight: normal;
      }
    }
  }

  .password-form {
    margin-top: 16px;

    :deep(.el-input__wrapper) {
      border-radius: 4px;
    }

    .form-actions {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 16px;

      .forget-pwd {
        font-size: 12px;
        color: #999;
        cursor: pointer;

        &:hover {
          color: #666;
        }
      }
    }

    .login-btn {
      position: relative;
      overflow: hidden;
      width: 100%;
      border-radius: 4px;
      background-color: #fb7299;
      border-color: #fb7299;
      font-weight: 500;

      &:hover {
        background-color: #ff85ad;
        border-color: #ff85ad;
      }

      .loading-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }

      :deep(.el-avatar) {
        transition: all 0.3s ease;
        animation: scaleIn 0.3s ease forwards;
      }
    }
  }

  .register-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 16px 0;
    font-size: 12px;
    color: #999;

    span {
      cursor: pointer;

      &:hover {
        color: #666;
      }
    }

    .divider {
      margin: 0 12px;
    }
  }

  .other-login {
    margin: 24px 0 0 0;

    .divider-line {
      position: relative;
      height: 1px;
      background-color: #f0f0f0;
      margin: 16px 0;

      .divider-text {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 0 10px;
        background-color: white;
        font-size: 12px;
        color: #999;
      }
    }

    .social-login {
      display: flex;
      justify-content: center;
      gap: 24px;

      .social-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
        color: #666;
        background: #f5f5f5;
        border: none;

        &:hover {
          color: #fb7299;
          background: #ffeaf1;
        }
      }
    }
  }

  .agreement {
    font-size: 12px;
    color: #999;
    text-align: center;
    line-height: 1.5;
    margin-top: 12px;

    b {
      color: #fb7299;
      font-weight: normal;
      cursor: pointer;
    }
  }
}

@keyframes scaleIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>
